<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('projectIncome.projectControlOSP.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.projectControlOSP.projectYear')}}</div>
              <el-select multiple v-model="listQuery.projectYear" collapse-tags :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in this.$store.getters.allDic.year" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.projectControlOSP.systemType')}}</div>
              <dict-select v-model="listQuery.systemType" code="systemType"></dict-select>
            </div>
          </el-col>
          <!--<el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">季別</div>
              <el-select multiple v-model="listQuery.contractQuarter" collapse-tags :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in this.$store.getters.allDic.quarter" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>-->
          <el-col :span="6">
            <div style="margin-right: 40px;display: flex;margin-top: 23px">
              <div style="flex: 2;margin-right: 12px">
                <el-select v-model="listQuery.type" collapse-tags :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in oddNumbers" :key="item.value" :label="item.value" :value="item.lable"></el-option>
                </el-select>
              </div>
              <div style="flex: 3" v-if="listQuery.type === '1'">
                <el-input v-model="listQuery.no" :placeholder="$t('projectIncome.projectControlOSP.enterVendorPONO')" clearable class="filter-item"></el-input>
                <!--<el-select v-model="listQuery.no" filterable remote reserve-keyword collapse-tags placeholder="请输入厂商PO单号关键字" :remote-method="getUserList" :loading="loading">-->
                  <!--<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"></el-option>-->
                <!--</el-select>-->
              </div>
              <div style="flex: 3" v-if="listQuery.type === '2'">
                <el-select v-model="listQuery.no" filterable remote reserve-keyword collapse-tags :placeholder="$t('projectIncome.projectControlOSP.enterProjectNo')" :remote-method="getUserList" :loading="loading">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" @change="queryProjectNo"></el-option>
                </el-select>
              </div>
              <div style="flex: 3" v-if="listQuery.type === '3'">
                <el-input v-model="listQuery.no" :placeholder="$t('projectIncome.projectControlOSP.enterPONO')" clearable class="filter-item"></el-input>
                <!--<el-select v-model="listQuery.no" filterable remote reserve-keyword collapse-tags placeholder="请输入PO单号关键词" :remote-method="getUserList" :loading="loading">-->
                  <!--<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"></el-option>-->
                <!--</el-select>-->
              </div>
            </div>
          </el-col>
          <el-col :span="5" style="margin-top: 23px">
            <el-button class="yt-btn-ys" type="primary" @click="getData">{{$t('button.search')}}</el-button>
            <el-button class="yt-btn" type="primary" @click="reset">{{$t('button.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-content">
        <span>{{$t('projectIncome.projectControlOSP.listTile')}}</span>
      </div>
      <div class="list-operation">
        <el-button class="yt-btn-ys" type="primary" @click="exportExcel">{{$t('button.export')}}</el-button>
      </div>
      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" 
      :default-sort = "{prop: 'vendorPoNo', order: 'ascending'}"
      :row-style="changeCss" v-loading="loading" :element-loading-text="$t('projectIncome.projectControlOSP.loading')" 
      element-loading-spinner="el-icon-loading" max-height="600">
        <el-table-column align="center" label="Sum"  width="180" fixed>
          <el-table-column type="index" align="center" :label="$t('projectIncome.projectControlOSP.serialNum')" width="60">
            <template slot-scope="scope">
              <div>{{ scope.row.serialNum }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('projectIncome.projectControlOSP.projectYear')" prop="projectYear" min-width="120"/>
        </el-table-column>
        <!--<el-table-column align="center" label="季别" prop="contractQuarter"/>-->
        <el-table-column align="center" label="">
          <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.vendorPoNo')" prop="vendorPoNo" min-width="120"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.projectNo')" prop="projectNo" min-width="120"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column align="center" :label="$t('projectIncome.projectControlOSP.epcContent')" prop="epcContent" min-width="300" :show-overflow-tooltip="true"/>
        </el-table-column>
        <el-table-column align="center" label="">
          <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.poNo')" prop="poNo" min-width="120"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.poApprovalMoney">
          <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.poApprovalMoney')" prop="poApprovalMoney" min-width="100">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.poApprovalMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="$t('projectIncome.projectControlOSP.vendorName')" prop="vendorName" min-width="100"/>
        <el-table-column align="center" :label="$t('projectIncome.projectControlOSP.epcType')" prop="epcType" min-width="100"/>
        <el-table-column align="center" :label="subtotal.requestFundsMoney">
          <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.requestFundsMoney')" prop="requestFundsMoney" min-width="100">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.requestFundsMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.receivablesMoney">
          <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.receivablesMoney')" prop="receivablesMoney" min-width="100">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.receivablesMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorPoMoney">
          <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.vendorPoMoney')" prop="vendorPoMoney" min-width="100">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.vendorPoMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.deductionMoney')" prop="deductionMoney" min-width="100">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{ scope.row.deductionMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" :label="$t('projectIncome.projectControlOSP.vendorDiscount')" prop="vendorDiscount" min-width="100">
          <template slot-scope="scope">
            <div v-format="'0.00%'">{{ scope.row.vendorDiscount }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!--<div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>-->
    </div>
  </div>
</template>

<script>
  import dictSelect from '@/components/Dict/dictValueSelect';
  import { queryProject } from '@/api/scheduleManager/worksDetails';
  import { countForProjectOSP } from '@/api/pmoReport/projectIncome';
  export default {
    name: 'projectControlOSP',
    data() {
      return {
        subtotal: {},
        listMapAll: this.$store.getters.allMapDic,
        listQuery: {
          page: 1,
          limit: 10,
          projectYear: [], // 专案年度（必须）
          systemType: '', // 系统别
          type: '2', // 厂商PO单号为1，专案编号为2，PO单号为3,必选其一
          no: '', // 厂商PO单号或专案编号或PO单号,必填其一
          contractQuarter: [] // 季别
        },
        options: [],
        loading: false,
        list: [],
        total: 0,
        oddNumbers: [
          { lable: '1', value: this.$t('projectIncome.projectControlOSP.vendorPoNo') },
          { lable: '2', value: this.$t('projectIncome.projectControlOSP.projectNo') },
          { lable: '3', value: this.$t('projectIncome.projectControlOSP.poNo') }
        ]
      };
    },
    components: { dictSelect },
    mounted() {
      this.getQuery()
      if (this.listQuery.projectYear.length > 0 || this.listQuery.no !== '') { this.getData() }
    },
    methods: {
      changeCss({ row }) {
        if (row.projectYear.indexOf('Sub Total') !== -1) {
          return 'background:#f0f2f5;color:#ff9900'
        }
      },
      getQuery() {
        const projectControlOSPListQuery = window.sessionStorage.getItem('projectControlOSPListQuery');
        if (projectControlOSPListQuery) {
          this.listQuery = JSON.parse(projectControlOSPListQuery);
        }
      },
      getData() {
        this.loading = true
        countForProjectOSP(this.listQuery).then(res => {
          if (res.status === 201) {
            this.$message.error(res.message);
            this.loading = false
          } else {
            this.list = res.data.list
            this.subtotal = res.data.subTotal
            Object.keys(this.subtotal).forEach(key => {
              this.subtotal[key] = String(this.subtotal[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
            })
            for (let i = 0; i < this.list.length; i++) {
              // 工程类别 epcType
              if (this.listMapAll.epcType[this.list[i].epcType]) {
                this.list[i].epcType = this.listMapAll.epcType[this.list[i].epcType];
              }
            }
            this.loading = false
          }
        })
      },
      // 重置
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          projectYear: [], // 专案年度（必须）
          systemType: '', // 系统别
          type: '2', // 厂商PO单号为1，专案编号为2，PO单号为3,必选其一
          no: '', // 厂商PO单号或专案编号或PO单号,必填其一
          contractQuarter: [] // 季别
        }
      },
      // 汇出
      exportExcel() {
        const a = document.createElement('a');
        const href = '/api/admin/excel/exportProjectControlTableOSP?projectYear=' + this.listQuery.projectYear + '&systemType=' + this.listQuery.systemType + '&type=' + this.listQuery.type + '&no=' + this.listQuery.no + '&contractQuarter=' + this.listQuery.contractQuarter + '&userId=' + this.$store.getters.info.id;
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      getUserList(query) {
        this.loading = true;
        queryProject({ projectNo: query }).then(res => {
          this.loading = false;
          this.options = res.data.rows.map(item => ({ value: item.id, label: item.projectNo }));
        });
      },
      queryProjectNo(val) {
        console.log(val)
      },
      handleFilter() {
        this.getData()
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('projectControlOSPListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped lang="scss">
</style>
